<template>
	<view class="container">
		<view class="top-bg" :style="{'padding-top': getMenuButton().top + 40 + 'px'}">
			<view class="user-info flex-y-center">
				<view class="" @tap="$myUni.navTo('/pages/user/user-info')">
					<image src="/static/images/default-avatar.png" class="avatar" mode="" v-if="!isLogin || userInfo.avatar === '默认头像' || !userInfo.avatar"></image>
					<image :src="userInfo.avatar | formatFile" class="avatar" v-else></image>
				</view>
				
				<view class="right-info flex-x-bet-y-center" v-if="isLogin">
					<view class="">
						<view class="name">{{userInfo.nickname}}</view>
						<view class="phone flex-y-center">
							<text>{{userInfo.phone}}</text>
							<image v-if="userInfo.isReal == 1"  src="/static/images/icon-realname.png" mode="" style="width: 80rpx;height: 30rpx;margin-left: 20rpx;"></image>
						</view>
						<view class="vip-str">
							{{userInfo.isVip == 2 ? '普通用户' : '月度会员'}}
						</view>
					</view>

					<view class="realname-btn" @tap="$myUni.navTo('/pages/user/realname')" v-if="userInfo.isReal == 2">
						实名认证
					</view>
				</view>
				<view class="right-info flex-x-bet-y-center" v-else @tap="$myUni.navTo('/pages/user/login')">
					未登录
				</view>
			</view>

			<view class="to-vip-wrapper" @tap="$myUni.navTo('/pages/user/vip')" v-if="isLogin">
				<image src="../../static/images/index-color-2.png" mode=""></image>
				<view class="vip-box flex-x-bet-y-center">
					<text>会员中心</text>
					<view class="up-vip-btn flex-xy-center">
						立即升级
					</view>
				</view>
			</view>
		</view>

		<view class="order-status-wrapper">
			<view class="title flex-x-bet-y-center">
				<text>购买订单</text>
				<view class="flex-y-center" @tap="$myUni.navTo('/pages/order/order-list')">
					<text class="all-text">查看全部</text>
					<u-icon name="arrow-right" size="30"></u-icon>
				</view>
			</view>
			<view class="order-status-list">
				<view class="order-status-item" v-for="(item, index) in orderStatusList" :key="index"
					@tap="$myUni.navTo('/pages/order/order-list')">
					<image :src="item.icon" class="icon-order" mode=""></image>
					<text class="order-status-text">{{item.name}}</text>
				</view>
			</view>
		</view>

		<view class="order-status-wrapper">
			<view class="title flex-x-bet-y-center">
				<text>商家订单</text>
				<view class="flex-y-center" @tap="$myUni.navTo('/pages/order/order-list')">
					<text class="all-text">查看全部</text>
					<u-icon name="arrow-right" size="30"></u-icon>
				</view>
			</view>
			<view class="order-status-list">
				<view class="order-status-item" v-for="(item, index) in orderStatusList2" :key="index"
					@tap="$myUni.navTo('/pages/order/order-list')">
					<image :src="item.icon" class="icon-order" mode=""></image>
					<text class="order-status-text">{{item.name}}</text>
				</view>
			</view>
		</view>

		<view class="menus-wrapper">
			<view class="title">常用服务</view>
			<view class="menus-list">
				<view class="menus-item" v-for="(item, index) in menusList" :key="index" @tap="menuHandle(item)">
					<image :src="item.icon" class="icon-menus" mode=""></image>
					<text class="menus-text">{{item.name}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapGetters, mapMutations } from 'vuex'
	import { getParam} from '@/api/common.js'
	import { phoneCall } from '@/utils/uni-api.js'
	export default {
		data() {
			return {
				kufuPhone: '',
				orderStatusList: [{
					icon: '/static/images/icon-order-1-1.png',
					name: '待确认',
					type: 1
				}, {
					icon: '/static/images/icon-order-1-2.png',
					name: '待支付',
					type: 1
				}, {
					icon: '/static/images/icon-order-1-3.png',
					name: '待发货',
					type: 1
				}, {
					icon: '/static/images/icon-order-1-4.png',
					name: '待收货',
					type: 1
				}, {
					icon: '/static/images/icon-order-1-5.png',
					name: '已完成',
					type: 1
				}],
				orderStatusList2: [{
					icon: '/static/images/icon-order-2-1.png',
					name: '待确认',
					type: 1
				}, {
					icon: '/static/images/icon-order-2-2.png',
					name: '待支付',
					type: 1
				}, {
					icon: '/static/images/icon-order-2-3.png',
					name: '待发货',
					type: 1
				}, {
					icon: '/static/images/icon-order-2-4.png',
					name: '待收货',
					type: 1
				}, {
					icon: '/static/images/icon-order-2-5.png',
					name: '已完成',
					type: 1
				}],
				menusList: [{
						icon: '/static/images/icon-mine-1.png',
						name: '需求管理',
						url: '/pages/demand/my-list-demand'
					},
					{
						icon: '/static/images/icon-mine-2.png',
						name: '厂商管理',
						url: '/pages/product/my-list-product?from=factory'
					},
					{
						icon: '/static/images/icon-mine-3.png',
						name: '二手管理',
						url: '/pages/product/my-list-product?from=used'
					},
					{
						icon: '/static/images/icon-mine-4.png',
						name: '租赁管理',
						url: '/pages/product/my-list-product?from=lease'
					},
					{
						icon: '/static/images/icon-mine-5.png',
						name: '我的钱包',
						url: '/pages/user/wallet'
					},
					{
						icon: '/static/images/icon-mine-6.png',
						name: '我的收藏',
						url: '/pages/user/collect-list'
					},
					{
						icon: '/static/images/icon-mine-7.png',
						name: '帮助中心',
						url: '/pages/other/help'
					},
					{
						type: 'kefu',
						icon: '/static/images/icon-mine-8.png',
						name: '客服热线',
						url: ''
					},
					{
						icon: '/static/images/icon-mine-9.png',
						name: '我的举报',
						url: '/pages/user/report-list'
					},
					{
						id: 'myStore',
						icon: '/static/images/icon-mine-10.png',
						name: '我的店铺',
						url: '/pages/user/register-user-2-enterprise'
					},
					// {
					// 	icon: '/static/images/icon-mine-11.png',
					// 	name: '厂商二手管理',
					// 	url: '/pages/product/my-list-product-sell?from=usedFactory'
					// }
				],
			}
		},
		onShow(){
			if(this.isLogin){
				this.$store.dispatch('user/getUserInfo').then((res) => {
					if(res.result.isFirm == 1){
						const storeMenu = this.menusList.find(item => item.id === 'myStore')
						storeMenu.url = '/pages/user/store-info'
					}
				})
				
			}
			this.getKefuPhone()
		},
		
		computed:{
			...mapGetters(['isLogin', 'userInfo'])
		},
		methods: {
			getKefuPhone(){
				getParam({paramName: 'PLATFORM_CUSTOMER_SERVICE_HOTLINE'}).then(res => {
					this.kufuPhone = res.result
				})
			},
			menuHandle(item){
				if(!item.type){
					this.$myUni.navTo(item.url)
				}else{
					if(item.type === 'kefu'){
						uni.showModal({
							title:'提示',
							content: '是否电话咨询客服？',
							success: res => {
								if(res.confirm){
									phoneCall(this.kufuPhone)
								}
							}
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.top-bg {
		background: linear-gradient(to right, #fff, #EDD6CD);
		// height: 480rpx;
		padding-right: 30rpx;
		padding-left: 30rpx;

		.user-info {
			padding-bottom: 50rpx;

			.avatar {
				width: 130rpx;
				height: 130rpx;
				border-radius: 50%;
				margin-right: 30rpx;
			}

			.name {
				font-weight: bold;
				font-size: 35rpx;
				color: #333333;
			}
			
			.phone{
				font-weight: 500;
				font-size: 28rpx;
				color: #666666;
			}

			.right-info {
				flex: 1;

				.vip-str {
					font-weight: 500;
					font-size: 27rpx;
					color: $theme-color;
					padding-top: 15rpx;
				}
			}

			.realname-btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 165rpx;
				height: 65rpx;
				background: linear-gradient(90deg, #FEA413, #FE5A13);
				border-radius: 33rpx;
				font-weight: 500;
				font-size: 29rpx;
				color: #FFFFFF;
			}
		}

		.to-vip-wrapper {
			position: relative;
			height: 100rpx;
			// overflow: hidden;

			image {
				position: absolute;
				z-index: 1;
				height: 100%;
				width: 100%;
			}

			.vip-box {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 2;
				font-weight: 800;
				font-size: 29rpx;
				color: #FFF0CD;
				padding: 0 30rpx;
			}

			.up-vip-btn {
				width: 140rpx;
				height: 50rpx;
				background: linear-gradient(0deg, #FFD675, #FFF0CD);
				border-radius: 10rpx;
				font-weight: 800;
				font-size: 27rpx;
				color: #37334C;
			}
		}
	}

	.order-status-wrapper {
		margin: 30rpx;
		background: #FFFFFF;
		border-radius: 19rpx;

		.title {
			margin: 0 30rpx;
			font-weight: bold;
			font-size: 33rpx;
			color: #333333;
			padding: 35rpx 0;
			border-bottom: 1rpx solid #E5E5E5;
		}

		.all-text {
			font-weight: 500;
			font-size: 27rpx;
			color: #808080;
			padding-right: 15rpx;
		}

		.order-status-list {
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;

			.order-status-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 30rpx 0;

				.icon-order {
					width: 62rpx;
					height: 62rpx;
				}

				.order-status-text {
					font-weight: 500;
					font-size: 27rpx;
					color: #333333;
					padding-top: 15rpx;
				}
			}
		}

	}

	.menus-wrapper {
		margin: 30rpx;
		background: #FFFFFF;
		border-radius: 19rpx;

		.title {
			font-weight: bold;
			font-size: 33rpx;
			color: #333333;
			padding: 35rpx 30rpx 0;
		}

		.menus-list {
			display: flex;
			flex-wrap: wrap;

			.menus-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 30rpx 0;
				width: 25%;

				.icon-menus {
					width: 80rpx;
					height: 80rpx;
				}

				.menus-text {
					font-weight: 500;
					font-size: 27rpx;
					color: #333333;
					padding-top: 15rpx;
				}
			}
		}
	}
</style>